<template>
    <div>
        <div class="pt-12px table-container">
            <el-table :data="tableData" :default-sort="{ prop: 'searchTotal', order: 'descending' }"
                :row-key="row => row.ID" :reserve-selection="true" :empty-text="noDataStr" class="w-full">
                <el-table-column prop="Keyword" label="蒸馏词" align="center" min-width="25%"></el-table-column>
                <el-table-column prop="Title" label="问题" align="center" min-width="30%"></el-table-column>
                <el-table-column prop="AITypeName" label="平台" align="center" min-width="15%"></el-table-column>
                <el-table-column prop="Rank" label="来源" align="center" min-width="15%">
                    <template v-slot="scope">
                        <span v-if="scope.row.Rank === 1">移动端</span>
                        <span v-else type="success">PC</span>
                    </template>
                </el-table-column>
                <el-table-column prop="AddTime" label="查询时间" align="center" min-width="15%">
                    <template #default="scope">
                        {{ formatDate(scope.row.AddTime) }}
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pt-16px pl-26px pr-26px pb-16px page-container flex flex-center">
            <Pagination v-if="tableData.length > 0" v-model:total="page.total" v-model:page="queryParams.curPage" v-model:limit="queryParams.pageSizes" :autoScroll="false" @pagination="handleQuery" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { dateFormat } from '@/utils/date'
import Pagination from '@/components/Pagination/index.vue'

const formatDate = computed(() => {
    return function (data: string) {
        return dateFormat(data, 'YYYY-MM-DD')
    }
})

const props = defineProps({
    tableData: {
        type: Array,
        default: () => []
    },
    noDataStr: {
        type: String,
        default: '暂无营销报表数据'
    },
    page:{
        type: Object,
        default: () => {}
    }
})

const emit = defineEmits(['update:data'])

const queryParams = reactive({
    curPage: props.page.curPage,
    pageSizes: props.page.pageSizes,
    limit:props.page.limit,
})

function handleQuery(val:any) {
    queryParams.limit = val.limit
    emit('update:data', queryParams)
}


</script>

<style scoped></style>